<template>
    <div class="lyrics-box">
        <div @click="closeLyrics" class="close-icon">x</div>
        <div class="ab-title">
            <span> 歌词啦啦啦啦。。。。。。。</span>
        </div>
    </div>
</template>

<script setup lang='ts'>
const closeLyrics = () => {
    console.log('2222')
    electron.ipcRenderer.invoke('lyricsWindow')
}
</script>

<style scoped lang='scss'>
.lyrics-box {
    width: 100%;
    height: 100%;
    position: relative;

    .close-icon {
        position: absolute;
        left: 5px;
        top:5px;
        font-size: 24px;
        font-weight: 600;
        cursor: pointer;
        color: #fff;
        z-index: 100;
        app-region: no-drag;
    }

    .ab-title {
        background-color: rgb(0 0 0 / 34%);
        width: 100%;
        height: 100%;
        z-index: 10;
        app-region: drag;
        font-size: 20px;
        color: #fff;
        font-weight: 600;

        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;

    }
}
</style>